<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="20">
        <template v-if="type == 1">
          <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
            <a-form-item label="活动名称">
              <a-input allowClear v-model="queryParam.name" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
            <a-form-item label="归属微商城">
              <a-select v-model="queryParam.appId" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option :value="item.wxAppid" v-for="(item, index) in brandList" :key="index"> {{ item.name }}微商城 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </template>
        <template v-if="type == 2">
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="活动名称">
              <a-input allowClear v-model="queryParam.activityName" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="亲密值门槛">
              <a-input-number style="width: 100%" allowClear v-model="queryParam.closeValueFloor" placeholder="请输入" :min="0" :precision="0"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="品牌">
              <a-select v-model="queryParam.brandId" placeholder="请选择" show-search>
                <a-select-option :value="item.id.toString()" v-for="item in brandList" :key="item.id"> {{ item.brandName }} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="queryParam.activityState" placeholder="请选择" show-search>
                <a-select-option :value="item.id.toString()" v-for="item in stateList" :key="item.id"> {{ item.name }} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </template>
        <template v-if="type == 3">
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="活动名称">
              <a-input allowClear v-model="queryParam.activityName" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="亲密值门槛">
              <a-input-number style="width: 100%" allowClear v-model="queryParam.closeValueFloor" placeholder="请输入" :min="0" :precision="0"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="品牌">
              <a-select v-model="queryParam.brandId" placeholder="请选择" show-search>
                <a-select-option  v-for="(item) in brandList" :value="item.id.toString()" :key="item.id"> {{ item.brandName }} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="queryParam.activityState" placeholder="请选择" show-search>
                <a-select-option :value="item.id.toString()" v-for="item in stateList" :key="item.id"> {{ item.name }} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-model-item label="活动时间">
              <a-range-picker
                style="width:100%;"
                show-time
                valueFormat="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                v-model="queryParam.time"
              />
            </a-form-model-item>
          </a-col>
        </template>
        <template v-if="type == 4">
          <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
            <a-form-item label="门店组名">
              <a-input allowClear v-model="queryParam.groupName" placeholder="输入门店组名查询" />
            </a-form-item>
          </a-col>
          <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
            <a-form-item label="门店名">
              <a-input allowClear v-model="queryParam.storeName" placeholder="输入门店名查询" />
            </a-form-item>
          </a-col>
        </template>
        <template v-if="type == 5">
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="专题名称">
              <a-input allowClear v-model="queryParam.themeName" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="品牌">
              <a-select v-model="queryParam.brandId" placeholder="请选择" show-search>
                <a-select-option  v-for="(item) in brandList" :value="item.id.toString()" :key="item.id"> {{ item.brandName }} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="6" :lg="10" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="queryParam.state" placeholder="请选择" show-search>
                <a-select-option :value="item.id.toString()" v-for="item in stateList" :key="item.id"> {{ item.name }} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </template>
        <a-col :xxl="24" :xl="24" :lg="24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <a-button type="primary" style="margin-left: 8px" @click="handleAdd">新增</a-button>
            <template v-if="type == 4">
              <a-button  style="margin-left: 8px" type="primary" icon="cloud-download" @click="handleExport">下载门店导入模版</a-button>
            </template>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { brandList } from '@/api/marketingCenter/less'
export default {
  props: {
    type: {
      type: [Number, String],
      default: 1 // 1-专题 2-挚友福利 3-挚友活动 4-门店组 5-专题管理
    }
  },
  data() {
    return {
      uploadData: {
        pageId: this.$route.params.id
      },
      uploadUrl: 'https/llllll',
      queryParam: {
        appId: '',
        department: '',
        remarks: '',
        nos: '',

      },
      stateList: [{
        id: '0',
        name: '禁用'
      },{
        id: '1',
        name: '启用'
      }],
      brandList: []
    }
  },
  computed: {
  },
  created() {},
  mounted() {
    this.getBrandList()
  },
  methods: {
    handleExport() {
      this.$emit('onExport')
    },

    // 新增
    handleAdd() {
      this.$emit('onAdd', 'null')
    },

    // 导入发货物流
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        // this.refreshSendUserList()
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },

    // 发券
    handleIssue() {
      this.$emit('handleIssue')
    },

    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    reset() {
      this.queryParam = {
        appId: '',
        department: '',
        remarks: ''
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },
    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] && values[i].length) {
          if (i === 'time') {
            formValue.startTime = values[i][0]
            formValue.endTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    },
    getBrandList() {
      brandList({
        current: 0,
        size: 99,
        state: 1
      }).then(res => {
        if (res.code === 200) {
          this.brandList = res.data.records
          this.brandList.forEach(item=>{
            item.id += "";
          })
        } else {
          this.$message.error(res.msg || res.message)
        }
      }).catch(err => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
</style>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
